<template>
  <div class="buyer">
    <!-- 分类 -->
    <v-sort></v-sort>

    <!-- 国家馆 -->
    <v-category
      :icon="'icon-national'"
      :listColor = "'#F9EDCB'"
      :title = "'国家馆'"
      :tabList = 'tabList.national'
    ></v-category>

    <!-- 热销 -->
    <v-hot></v-hot>

    <!-- 新品主题 -->
    <v-category
      :icon="'icon-new'"
      :listColor = "'#DDEAF9'"
      :title = "'新品主题'"
      :tabList = 'tabList.newProduct'
    ></v-category>

    <!-- 大厂牌 -->
    <v-big-brand></v-big-brand>

    <!-- 其他主题 -->
    <v-category
      :icon="'icon-other'"
      :listColor = "'#FAE3D9'"
      :title = "'其他主题'"
      :tabList = 'tabList.otherTheme'
    ></v-category>

    <!-- 猜你喜欢 -->
    <v-recommend></v-recommend>
  </div>
</template>

<script>
import Sort from './components/Sort.vue'
import Category from './components/Category.vue'
import Hot from './components/Hot.vue'
import BigBrand from './components/BigBrand.vue'
import Recommend from './components/Recommend.vue'
export default {
  name: 'Buyer',
  components: {
    'v-sort': Sort,
    'v-category': Category,
    'v-hot': Hot,
    'v-big-brand': BigBrand,
    'v-recommend': Recommend
  },
  data () {
    return {
      tabList: {
        national: ['意大利馆', '意大利馆', '意大利馆', '意大利馆'],
        newProduct: ['饼干', '巧克力', '饮料', '葡萄酒', '橄榄油'],
        otherTheme: ['饼干', '巧克力', '饮料', '葡萄酒', '橄榄油']
      }
    }
  },
  methods: {

  },
  mounted () {

  }
}
</script>

<style lang="scss" scoped>
.buyer {
  background: #F9F9F9;
}
</style>